<script setup lang="ts">
import { PropType, nextTick, reactive } from 'vue'
import ClassItem from './class-item.vue'
import { ApiCategoryData, CommodityItem } from '@/basePackage/pages/merchant/types'

const $props = defineProps({
  height: {
    type: Number,
    default: 1000,
  },
  info: {
    type: Object as PropType<ApiCategoryData>,
    default() {
      return {}
    },
  },
  large: {
    type: Number,
    default: 1,
  },
  list: {
    type: Array as PropType<CommodityItem[]>,
    default() {
      return []
    },
  },
})
const scrollOptions = reactive({
  old: 0,
  new: 0,
})
const $emit = defineEmits(['listLoadMore'])
// const $emit = defineEmits(['changeTab'])

// const hanleChangeTab = (idx: number) => {
//     handleBackTop()
//     $emit('changeTab', idx)
// }
const scrolltolower = () => {
  $emit('listLoadMore')
}
const handleNavToRetrive = (id: string, platformCategoryThirdName: string) => {
  uni.navigateTo({
    url: `/basePackage/pages/searchRetrieve/SearchRetrieve?platformCategoryThirdId=${id}&isGoods=true&keyword=`,
  })
}
function handleBackTop() {
  scrollOptions.new = scrollOptions.old
  nextTick(() => {
    scrollOptions.new = 0
  })
}
function handleScroll(e: any) {
  scrollOptions.old = e.detail.scrollTop
}
defineExpose({
  handleBackTop,
})
</script>

<template>
  <scroll-view
    :style="{ height: $props.height + 'px' }"
    class="classificate"
    scroll-y
    :scroll-top="scrollOptions.new"
    @scroll="handleScroll"
    @scrolltolower="scrolltolower"
  >
    <view v-for="item in $props.info.children" :key="item.id" class="classificate__unit">
      <view class="classificate__unit-title">{{ item.name }}</view>
      <view class="classificate__unit-content">
        <view v-for="ite in item.children" :key="ite.id" class="classificate__unit-content-item" @click="handleNavToRetrive(ite.id, ite.name)">
          <image :src="ite.categoryImg" class="classificate__unit-content-item--image" />
          <view class="classificate__unit-content-item--name">{{ ite.name }}</view>
        </view>
      </view>
    </view>

    <div v-if="$props.large === 2" class="classificate__list--title">
      <div style="position: absolute; z-index: 100">热门商品</div>
      <div class="classificate__list--red"></div>
    </div>

    <view v-if="$props.large === 2" class="classificate__list">
      <class-item v-for="item in $props.list" :key="item.productId" :is-large="$props.large" :info="item" />
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
@include b(classificate) {
  position: relative;
  width: 570rpx;
  padding: 28rpx 10rpx 0 10rpx;
  box-sizing: border-box;
  background: #fff;
  color: #3c3c3c;
  &::-webkit-scrollbar {
    width: 0 !important;
  }
  @include e(unit) {
    width: 498rpx;
    margin: 0 auto;
    border-radius: 20rpx;
    margin-top: 20rpx;
    box-shadow: 0px 0px 15px -3px rgba(0, 0, 0, 0.25);
    // border: 1px solid rgba(0, 0, 0, 0.25);
    padding-left: 17rpx;
    padding-bottom: 10rpx;
  }
  @include e(unit-title) {
    line-height: 88rpx;
    font-weight: bold;
    font-size: 28rpx;
  }
  @include e(unit-content) {
    display: grid;
    grid-template-columns: repeat(3, 130rpx);
    grid-column-gap: 26rpx;
    grid-row-gap: 20rpx;
  }
  @include e(unit-content-item) {
    @include m(image) {
      width: 130rpx;
      height: 130rpx;
      border-radius: 20rpx;
    }
    @include m(name) {
      font-size: 22rpx;
      width: inherit;
      text-align: center;
    }
  }
  @include e(list) {
    padding-bottom: 1rpx;
    box-sizing: border-box;
    @include m(title) {
      position: relative;
      margin-top: 30rpx;
      margin-bottom: 7px;
      width: 56px;
      height: 34rpx;
      font-size: 14px;
    }
    @include m(red) {
      position: absolute;
      height: 10rpx;
      width: 112rpx;
      border-radius: 20rpx;
      z-index: 90;
      bottom: 0;
      background-color: #fa3534;
    }
  }
}
</style>
